<template>
  <Nav :mapControlSelect="false" />
  <div class="left">
    <Total class="left-total" />
  </div>
  <svg id="park-svg"
    style="width:100%;    height: calc(100% - 10vh);margin-top: 5vh;margin-bottom: 5vh;">
    <image id='background-img' width='100%' height="100%" preserveAspectRatio="xMidYMid meet"
      xlink:href="@/assets/img/background.png">
    </image>
    <image style="opacity:0" class="hover-image" xlink:href="@/assets/img/hover1.png" x='520'
      y='330'>
    </image>
    <image style="opacity:0" class="hover-image" xlink:href="@/assets/img/hover2.png" x='670'
      y='420'>
    </image>
    <image style="opacity:0" class="hover-image" xlink:href="@/assets/img/hover3.png" x='845'
      y='520'>
    </image>
    <image style="opacity:0" class="hover-image" xlink:href="@/assets/img/hover4.png" x='1055'
      y='310'>
    </image>
    <!-- 辅助区域 -->
    <!-- <rect class="assist-rect" fill="red" width="170" height="120" x="530" y="398"></rect> -->
  </svg>
</template>

<script lang="ts">
interface WindowInfo {
  latitude: number
  longitude: number
  regionId: string
  regionName: string
  regionType: number
}
/**
 * svg知识点
 * 属性preserveAspectRatio="xMidYMid slice",图片自适应
 * 属性viewBox="0 0 1920 843.3125"视口大小
 */
import { select, selectAll } from 'd3-selection'
import fireExtinguisher4A from '@/assets/img/fireExtinguisher4A.png'
import Nav from '@/components/nav/index.vue'
import Total from '@/components/total/index.vue'
import { ref, defineComponent } from 'vue'
export default defineComponent({
  name: 'over-view',
  components: {
    Nav,
    Total,
  },
  props: {},
  data() {
    return {
      pointList: [],
    }
  },
  methods: {
    /**
     * @title 图片点击事件
     * @param targetEle被点击的目标元素
     * @param d3ClickEvent被点击的事件源
     */
    imageClick(targetEle: string) {},
    /**
     * @title 生成弹窗
     * @param windowInfo窗体信息
     */
    createWindow(targetEle: SVGElement, windowInfo: WindowInfo) {
      console.log(targetEle.attributes[4])
      select('#park-svg')
        .append('svg')
        .attr('class', 'window-info')
        .append('rect')
        .attr('fill', 'yellow')
        .attr('width', 96)
        .attr('height', 96)
        .attr('x', targetEle.attributes[4].value)
        .attr('y', targetEle.attributes[5].value)
        .append('text')
        .attr('font-size', '16px')
        .attr('x', targetEle.attributes[4].value)
        .attr('y', targetEle.attributes[5].value)
    },
    /**
     * @title mouseover and mouseover
     */
    imageMouseOver() {
      selectAll('.hover-image').on('mouseenter', function (e) {
        select(this).attr('style', 'opacity:1')
      })
      selectAll('.hover-image').on('mouseleave', function (e) {
        select(this).attr('style', 'opacity:0')
      })
    },
    /**
     * 设置图片位子以及大小
     */
    initView() {
      let wrapEleHeight = document
        .querySelector('.wrap')
        ?.getBoundingClientRect().height
      if (wrapEleHeight) {
        //暂时将静态图片的高度写死(如何获取静态图片的原始尺寸?)
        let sacle = wrapEleHeight / 2113
        select('#park-svg').attr('viewBox', `0 0 1920 ${wrapEleHeight}`)
        selectAll('.hover-image').each(function (item, index) {
          if (index === 0) {
            select(this).attr('height', sacle * 449)
          }
          if (index === 1) {
            select(this).attr('height', sacle * 505)
          }
          if (index === 2) {
            select(this).attr('height', sacle * 581)
          }
          if (index === 3) {
            select(this).attr('height', sacle * 690)
          }
        })
      }
    },
  },
  setup: () => {},
  mounted() {
    this.initView()
    this.imageMouseOver()
  },
})
</script>

<style lang="less" scoped>
.left {
  position: fixed;
  top: 74px;
  width: 24.79vw;
  height: calc(100% - 74px);
  margin-left: 16px;
  .left-total {
    height: 23.85%;
  }
}
</style>>
